<template>
  <div class="container" style="margin-top: 10px">
    <el-card v-loading="loading">
      <!-- 表单 -->
      <el-form label-width="70px" :inline="true" :model="form">
        <el-form-item label="学科名称" prop="tagName">
          <el-input v-model="form.tagName" size="small"/>
        </el-form-item>
        <el-form-item>
          <el-button @click="handelClear" size="small">清除</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handelSearch" size="small">搜索</el-button>
        </el-form-item>
        <el-form-item class="filter-item fr">
          <el-button
          size="small"
          type="success"
          icon="el-icon-edit"
          @click="handelAdd"
            >新增学科</el-button
          >
        </el-form-item>
      </el-form>
      <!-- 数据记录 -->
      <el-alert
        v-if="alertText !== ''"
        :title="alertText"
        type="info"
        class="alert"
        :closable="false"
        show-icon
      ></el-alert>
      <template>
        <!-- 表格 -->
        <el-table :data="dataList" style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            size
            :index="indexFn"
          >
          </el-table-column>
          <el-table-column prop="subjectName" label="学科名称" width="150">
          </el-table-column>
          <el-table-column prop="username" label="创建者" width="100"> </el-table-column>
          <el-table-column
            prop="addDate"
            label="创建日期"
            width="200"
            :formatter="formatterDate"
          >
          </el-table-column>
          <el-table-column prop="isFrontDisplay" label="前台是否显示" :formatter="formatterSta" width="150"> </el-table-column>
          <el-table-column prop="twoLevelDirectory" label="二级目录" width="120">
          </el-table-column>
          <el-table-column prop="tags" label="标签" width="100"> </el-table-column>
          <el-table-column prop="totals" label="题目数量" width="100"> </el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button type="text" @click="$router.push(`/subjects/directorys?id=${row.id}&name=${row.subjectName}`)" >学科分类</el-button>
              <el-button type="text" @click="$router.push(`/subjects/tags?id=${row.id}&name=${row.subjectName}`)" >学科标签</el-button>
              <el-button type="text" @click="check(row)">修改</el-button>
              <el-button type="text" @click="handelDel(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    <!-- 分页组件 -->
    <div
      class="pages"
      style="margin: 20px"
    >
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="5"
        background
        layout="->,prev, pager, next, sizes,jumper"
        :total="total"
        >
      </el-pagination>
    </div>
    <!-- 新增/修改弹框 -->
     <div class="container">
     <el-dialog
        :title="title"
        :visible="showDialog"
        width="30%"
        @close="close"
      >
      <el-form :model="addForm" :rules="rules" ref="addForm" style="margin-left:10px">
        <el-form-item prop="subjectName" label="学科名称">
          <el-input v-model="addForm.subjectName" placeholder="请输入学科名称" style="width:230px;"/>
        </el-form-item>
        <el-form-item prop="value">
          <el-switch
            style="margin-left:10px"
            v-model="addForm.value"
            active-color="#13ce66"
            inactive-color="#ff4949"
            inactive-text="是否显示"
            active-value="1"
            inactive-value="0">
          </el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" >
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="handelSubmit">确 定</el-button>
      </span>
      </el-dialog>
     </div>
    </el-card>
  </div>
</template>

<script>
import { show } from '@/api/hmmm/constants.js'
// import { detail } from '@/api/hmmm/tags.js'
import { list as list1, update, add, remove } from '@/api/hmmm/subjects.js'
import dayjs from 'dayjs'
export default {
  data () {
    return {
      status, // 状态
      form: {
        tagName: ''
      },
      page: 1, // 当前页
      pagesize: 5, // 每页条数
      total: 0, // 总条数
      dataList: [], // 表格列表
      showDialog: false, // 弹框
      dialogVisible: false, // 修改弹窗
      addForm: { // 弹框表单
        subjectName: '',
        value: '1',
        id: ''
      },
      // BUG校验规则 提醒信息位置不对
      rules: {
        subjectName: [{ required: true, message: '请输入学科名称!', trigger: blur }]
      },
      subjectList: [], // 学科列表
      loading: false
    }
  },
  computed: {
    // 记录条数
    alertText () {
      return `数据一共${this.total}条`
    },
    // 弹框题目
    title () {
      return this.addForm.id ? '修改学科' : '新增学科'
    }
  },
  methods: {
    // 获取全部列表展示
    async getWholeList () {
      // console.log(this.form.tagName)
      this.loading = true
      const { data } = await list1({ subjectName: this.form.tagName, page: this.page, pagesize: this.pagesize })
      this.dataList = data.items
      this.total = data.counts
      this.loading = false
    },
    // 1.点击清除按钮
    handelClear () {
      this.form = {}
      this.handelSearch()
    },
    // 2.点击搜索 根据输入框的值筛选数据进行渲染
    async handelSearch () {
      this.getWholeList()
    },
    // 3.获取标签列表
    // async getTagsList () {
    //   console.log(11111111111)
    //   const {
    //     data: { items, counts }
    //   } = await list({ page: this.page, pagesize: this.pagesize })
    //   this.tagsList = items
    //   this.total = counts
    // },
    // 4.处理表格日期格式
    formatterDate (cellValue) {
      return dayjs(cellValue.addDate).format('YYYY-MM-DD HH:mm:ss')
    },
    // 5.处理前台是否显示
    formatterSta (cellValue) {
      const res = show.find(item => item.value === cellValue.isFrontDisplay)
      return res ? res.label : '未知'
    },
    // 6.监听页数的变化
    handleSizeChange (val) {
      this.pagesize = val
      this.page = 1
      this.getWholeList()
    },
    // 7.监听当前页的变化
    handleCurrentChange (val) {
      this.page = val
      this.getWholeList()
    },
    // 8.自定义排序
    indexFn (index) {
      return index + 1 + this.pagesize * (this.page - 1)
    },
    // 11.关闭弹框
    close () {
      // console.log(1)
      this.showDialog = false
      this.$refs.addForm.resetFields()
      this.addForm = {}
    },
    // 9.修改按钮
    check (row) {
      console.log(row)
      this.showDialog = true
      this.addForm = {
        ...row,
        value: row.isFrontDisplay + ''
      }
      console.log(this.addForm.value, 11)
    },
    // 10.添加标签
    handelAdd () {
      this.showDialog = true
      this.addForm.value = '1'
    },
    // 13.标签添加/修改
    handelSubmit () {
      this.$refs.addForm.validate(async flag => {
        if (!flag) return
        console.log(this.addForm)
        if (this.addForm.id) {
          // 修改
          await update({ id: this.addForm.id, subjectName: this.addForm.subjectName, isFrontDisplay: this.addForm.value })
          this.$message.success('修改成功!')
        } else {
          // 添加
          console.log(this.addForm)
          await add({ subjectName: this.addForm.subjectName, isFrontDisplay: this.addForm.value })
          this.$message.success('添加成功!')
        }
        this.getWholeList()
        this.close()
      })
    },
    // 15.删除标签
    handelDel (id) {
      if (this.dataList.length < 1) {
        this.page--
      }
      this.$confirm('此操作将删除该学科,是否继续?', '提示', { type: 'warning' }).then(async () => {
        await remove({ id })
        this.getWholeList()
        this.$message.success('删除成功!')
      }).catch(() => { this.$message.error('取消操作!') })
    }
  },
  created () {
    // 1.进页面就获取列表
    this.getWholeList()
    // 2. 键盘回车事件
    window.onkeydown = function (e) {
      if (e.keyword === 13) {
        this.handleCurrentChang()
      }
    }
  }
}
</script>

<style scoped lang='less'></style>
